<template>
	<view class="m16 pr"  v-if="Object.keys(userArray).length > 0">
		<view class="delete">
			<button  v-if="type=='4'" :class="['bg-btn-gray','small-btn','bg-btn-blue']" @click="addUser">新增</button>
				<button  v-if="type=='4'"  :class="['bg-btn-gray','small-btn',{'bg-btn-green':isAbleUnbind}]" @click="updateUser">修改关系</button>
			<button  v-else :class="['bg-btn-gray','small-btn',{'bg-btn-red':isAbleUnbind}]" @click="unbind">删除</button>
		</view>	
		<checkbox-group @change="radioChange">
			<view v-for="(items, key) in userArray" :key="key">
				<view class="flex-l-r m20 mt40">
					<view class="flex-h-c">
						<i :class="'iconfont-kind-'+key" class="iconfont blue"></i>
						<text>{{ getUserKindDes(key) }}</text>
					</view>
					
				</view>
				<view class="bgw radio-wraper">
					<label class="uni-list-cell uni-list-cell-pd radio-label" v-for="(item) in items" :key="item.reqUrlCode">
						<view class="radio-list bb">
							<view><checkbox color="#1F95EC" :value="item.reqUrlCode + ',' + item.uniqueId + ',' + item.uniqueType+','+item.userName+','+item.addrName+','+item.userKindId" style="transform:scale(0.7)" /></view>
							<view class="radio-text">
								<text>{{blurStr(item.meterNo,3,3)}}</text>
								<text class="line">|</text>
								<text>{{ item.userName }}</text>
								<text class="line">|</text>
								<text>{{blurStr(item.addrName,3,3)}}</text>
							</view>
						</view>
					</label>
				</view>
			</view>
		</checkbox-group>
			<!-- 自定义弹窗 -->
		<popup ref="popup" type="center" :mask-click="false">
			<view class="uni-tip">
				<view class="uni-tip-title blue bb">
					<text>信息</text>
					<i class="iconfont iconfont-close" @click="cancel"></i>
				</view>
				<view class="uni-tip-content">
					<list
						label="姓名"
						:value="user.userName">
					</list>
					<list
						label="地址"
						:value="user.addrName">
					</list>
				</view>
				<view class="relation p20">
					<view class="title">
						与我关系
					</view>
					<group-tabs :list="userKindArray" :cIndex="userKind.userKindId" @active="getActive"></group-tabs>
				</view>
				
				<view class="uni-tip-group-button">
					<button class="able-button" @click="updateFun()">修改</button>
				</view>
			</view>
		</popup>
	</view>
	<view class="tc mt150" v-else>当前没有绑定的用户</view>
</template>

<script>
let util = require('../../utils/utils.js');
let api = require('../../utils/api.js');
import list from '../../components/List.vue';
import popup from '../../components/uni-popup/uni-popup.vue';
import groupTabs from '../../components/group-tabs.vue'
export default {
	data() {
		return {
			userArray: {},
			userKindArray: [],
			current: -1,
			params: [],
			index:0,
			type:'5',
			user:{},
			userKind:{},
		};
	},
	components: {
		list,
		popup,
		groupTabs
	},
	computed: {
		isAbleUnbind() {
			return this.params.length > 0 ? true:false;
		}
	},
	onLoad(options){
		console.log(options);
		if(options.type == '4'){
			this.type = '4'
		}
	},
	async onShow() {
		let that = this;
		let data = await util.getStorage("config");
		let userArray = data.data.userArray;
		that.userKindArray = data.data.userKindArray;
		let newArray = {};
		for (let i = 0; i < userArray.length; i++) {
			let item = userArray[i];
			let flag = newArray.hasOwnProperty(item.userKindId);
			if (flag) {
				newArray[item.userKindId].push(item);
			} else {
				newArray[item.userKindId] = [item];
			}
		}
		that.userArray = newArray;
		console.log(that.userArray)
	},
	methods: {
		async updateFun(){
			//判断关系是否修改
			if(this.userKind.userKindId == this.user.userKindId) {
				util.showModal('你未修改任何关系');
				return;
			}
			let pdata = this.user;
			pdata.userKindId = this.userKind.userKindId;
			await api.updateUser(pdata);
			util.showModal(`修改关系成功`,async ()=>{
				let data = await api.getSystemConfig();
				if(!data.data.hasOwnProperty("userArray")){
					data.data.userArray = [];
				}
				uni.redirectTo({ url: "/pages/register/home?type=4"});
			})
		},
		cancel() { 
			this.$refs.popup.close();
		},
		getUserKindDes: function(id) {
			let des = '';
			for (var i = 0; i < this.userKindArray.length; i++) {
				let item = this.userKindArray[i];
				if (id == item.userKindId) {
					des = item.userKindDes;
				}
			}
			return des;
		},
		//添加用户
		addUser(){
			util.navigateTo('/pages/register/register');
		},
		//修改关系
		updateUser(){
			//判断个数
			let len = this.params.length;
			if(len == 0)  return;
			if(len>1){
				util.showModal('只能选择一个用户进行修改')
			} else {
				this.$refs.popup.open();
				this.user = this.params[0];
				this.userKind.userKindId = this.user.userKindId;
			}
		},
		unbind() {
			//是否要解除当前绑定操作
			let that = this;
			if(that.params.length == 0) return;
			console.log(that.params)
			let nameArr = that.params.map((item)=>{
				return item.userName;
			})
			console.log(nameArr)
			util.showModal(`确认要删除用户${nameArr.join(',')}吗?`,async () => {
				await api.unbind({userArray:that.params});
				//刷新页面
				util.showModal(`${nameArr.join(',')},解绑成功`,async ()=>{
					let data = await api.getSystemConfig();
					if(!data.data.hasOwnProperty("userArray")){
						data.data.userArray = [];
					}
					uni.redirectTo({ url: "/pages/register/home?type=5"});
				})
				
			},true);
		},
		getActive(item){
			this.userKind = item;
		},
		radioChange: function(evt) {
			console.log(evt.target.value);
			this.params = [];
			let checkArray = evt.target.value;
			for (var i = 0; i < checkArray.length; i++) {
				let item = checkArray[i];
				let arr = item.split(',');
				let obj = {
					reqUrlCode: arr[0],
					uniqueId: arr[1],
					uniqueType: arr[2],
					userName:arr[3],
					addrName:arr[4],
					userKindId:arr[5]
				};
				this.params.push(obj);
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $uni-bg-color-grey;
}
.delete {
	position: absolute;
	right: 0;
	top: -8upx;
}
.relation {
	.title {
		margin-bottom: 20upx;
	}
}
.uni-tip-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/*#ifdef H5*/
.group-tabs /deep/ {
	li > view {
		height: 80upx !important;
		line-height: 80upx !important;
	}
}
/*#ifdef H5*/

/*#ifdef MP-WEIXIN*/
.group-tabs {
	li > view {
		height: 80upx !important;
		line-height: 80upx !important;
	}
}
/*#ifdef H5*/

.radio-wraper {
	border-radius: $uni-border-radius-base;
	padding: 0 20upx;
	.radio-label:last-child > .bb {
		border: 0;
	}
	.radio-text {
		display: flex;
		align-items: center;
		> .line {
			position: relative;
			top: -2upx;
		}
		> text {
			margin-left: 10upx;
			margin-right: 10upx;
		}
	}
	.radio-list {
		height: 90upx;
		display: flex;
		align-items: center;
		> view {
			display: inline-block;
		}
	}
}
.flex-l-r i {
	font-size: 38upx;
	margin-right: 10upx;
}
</style>
